<template>
  <div class="auth-container">
    <div class="form-container">
      <div class="title">
        <h2>{{ isLogin ? "欢迎登录丨" : "欢迎注册丨" }}</h2>
        <h4>自主学习平台</h4>
      </div>
      <!-- 登录 -->
      <el-form
        v-if="isLogin"
        ref="loginForm"
        :model="loginParams"
        :rules="loginRules"
        label-width="auto"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginParams.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginParams.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <!-- 注册 -->
      <el-form
        v-else
        ref="registerForm"
        :model="registerParams"
        :rules="registerRules"
        label-width="auto"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerParams.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" >
          <el-input v-model="registerParams.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input type="number" v-model="registerParams.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <!-- <el-input v-model="registerParams.sex"></el-input> -->
          <el-radio-group v-model="registerParams.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input type="phone" v-model="registerParams.phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="email" v-model="registerParams.email"></el-input>
        </el-form-item>
      </el-form>
      <div class="button-group">
        <el-button type="primary" @click="handleSubmit()">{{ isLogin ? "登录" : "注册" }}</el-button>
        <el-button @click="resetForm()">清空</el-button>
      </div>
      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
      <p class="toggle">
        {{ isLogin ? "还没有账号？" : "已经有账号了？" }}
        <span @click="toggleForm">{{ isLogin ? "注册" : "登录" }}</span>
      </p>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo", "register"]),
  },
  data() {
    return {
      isLogin: true, //判断登录还是注册
      // 登录
      loginParams: {
        username: "",
        password: "",
      },
      // 注册信息
      registerParams: {
        username: "",
        password: "",
        age: "",
        sex: "",
        phone: "",
        email: "",
      },
      // 登录验证规则
      loginRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
        ],
      },
      // 注册验证规则
      registerRules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
        ],
        age: [
          {
            required: true,
            message: "请输入年龄",
            trigger: ["blur", "change"],
          },
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"],
          },
          { validator: this.validatePhone, trigger: ["blur", "change"] },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱地址",
            trigger: ["blur", "change"],
          },
          { validator: this.validateEmail, trigger: ["blur", "change"] },
        ],
      },
      errorMessage: "",
    };
  },
  methods: {
    toggleForm() {
      this.isLogin = !this.isLogin;
    },
    // 表单提交
    handleSubmit() {
      if (this.isLogin) {
        const register = JSON.parse(localStorage.getItem("segister"));
        // 登录逻辑
        // 验证规则
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            if (
              register.username == this.loginParams.username && register.password == this.loginParams.password
            ) {
              localStorage.setItem("userInfo", JSON.stringify(register));
              this.$message({
                message: "登录成功",
                type: "success",
              });
              setTimeout(() => {
                this.$router.push({
                  path: "/",
                });
              }, 1000);
            } else {
              if(register.username != this.loginParams.username){
                this.$message({
                message: "账号未注册",
                type: "error",
              });
              }else if(register.username != this.loginParams.username||register.password != this.loginParams.password){
                this.$message({
                message: "账号或者密码不正确",
                type: "error",
              });
              }
              
            }
          } else {
            return false;
          }
        });
      } else {
        // 注册逻辑
        this.$refs.registerForm.validate((valid) => {
          if (valid) {
            localStorage.setItem(
              "segister",
              JSON.stringify(this.registerParams)
            );
            this.$message({
              message: "注册成功",
              type: "success",
            });
            this.toggleForm()
            // console.log("register", this.register);
          } else {
            return false;
          }
        });
      }
    },
    // 重置表单
    resetForm() {
      if (this.isLogin) {
        this.$refs.loginForm.resetFields();
      } else {
        this.$refs.registerForm.resetFields();
      }
    },
    // 自定义手机号验证规则
    validatePhone(rule, value, callback) {
      const reg = /^1[3456789]\d{9}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的手机号"));
      }
    },
    // 自定义邮箱验证规则
    validateEmail(rule, value, callback) {
      const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的邮箱地址"));
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.auth-container {
  height: 100vh;
  background-color: #f0f2f5;
  background-image: url("../../assets/login1.webp");
  background-size: 100% 100%;
}

.form-container {
  width: 350px;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  text-align: center;
  position: absolute;
  left: 300px;
  top: 50%;
  transform: translateY(-50%);
}

.form-container h2 {
  margin-bottom: 1rem;
}
.title {
  display: flex;
  align-items: center;
  font-family: "楷体";
  h4 {
    color: #333;
  }
}
.form-container input {
  width: 100%;
  padding: 0.75rem;
  margin: 0.5rem 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}
.button-group {
  display: flex;
  justify-content: center;
}
// .form-container button {
//   width: 100%;
//   padding: 0.75rem;
//   background-color: #42b983;
//   color: #fff;
//   font-size: 1rem;
//   font-weight: bold;
//   border: none;
//   border-radius: 4px;
//   cursor: pointer;
//   margin-top: 1rem;
// }

// .form-container button:hover {
//   background-color: #36a574;
// }

.error {
  color: red;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.toggle {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #888;
}

.toggle span {
  color: #42b983;
  cursor: pointer;
  font-weight: bold;
}
</style>
